import React, { useState } from 'react';
import { Modal, Form, Input, Select } from 'antd';

const { Option } = Select;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function EditStatusFlow({ visiable, close, form, callback, result, status }) {
  const { getFieldDecorator } = form;

  const onSubmit = () => {
    form.validateFields((err, value) => {
      if (err) return;
      callback(value);
      close();
    });
  };

  return (
    <Modal
      title="新增个性组件"
      width="500px"
      destroyOnClose
      onCancel={close}
      visible={visiable}
      onOk={onSubmit}
    >
      <Form>
        <Form.Item label="左表达式" {...formItemLayout}>
          {getFieldDecorator('attrCode', {
            rules: [
              {
                required: true,
                message: '左表达式不能为空',
              },
            ],
          })(<Input placeholder="请输入" />)}
        </Form.Item>
        <Form.Item label="操作符" {...formItemLayout}>
          {getFieldDecorator('optType', {
            rules: [
              {
                required: status === 'set' ? true : false,
                message: '操作符不能为空',
              },
            ],
          })(
            <Select placeholder="请选择" disabled={status === 'set' ? false : true}>
              {result
                ? result.map(item => {
                    return (
                      <Option key={item.attrValue} value={item.attrValue}>
                        {item.attrValueName}
                      </Option>
                    );
                  })
                : ''}
            </Select>
          )}
        </Form.Item>
        <Form.Item label="右表达式" {...formItemLayout}>
          {getFieldDecorator('attrValue', {
            rules: [
              {
                required: true,
                message: '右表达式不能为空',
              },
            ],
          })(<Input placeholder="请输入" />)}
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default Form.create()(EditStatusFlow);
